<template>
  <div>
    <div class="index-top-card">
      <div>
        <van-search
          shape="round"
          show-action
          background="transparent"
          placeholder="请输入搜索关键词"
        >
          <template #action>
            <div>搜索</div>
          </template>
        </van-search>
      </div>
      <div>
        <van-row gutter="20" class="card-count">
          <van-col span="24" class="fs-16">我的业绩 | 吴鸿卓</van-col>
          <van-col span="8" class="mt-10">
            <p>88900</p>
            <p>今日金额</p>
          </van-col>
          <van-col span="8" class="mt-10">
            <p>205</p>
            <p>今日配货量</p>
          </van-col>
          <van-col span="8" class="mt-10">
            <p>20</p>
            <p>今日完成单</p>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="index-list">
      <van-row>
        <van-col span="12">
          <p>最新订单</p>
        </van-col>
        <van-col span="12">
          <p>查看全部 <van-icon name="arrow" /></p>
        </van-col>
        <van-col span="24">
          <div v-for="CardList in CardList" :key="CardList.customer_name">
            <ListCard
              :title="CardList.customer_name"
              :date="CardList.created_at"
              :state="CardList.records[0].status"
              :ids="CardList.records"
            />
          </div>
        </van-col>
      </van-row>
      <van-back-top right="10vw" bottom="10vh" />
    </div>
  </div>
</template>

<script setup>
import ListCard from "../components/ListCard.vue";
import { getNearOrders } from "../api/order";
import { onMounted, ref } from "vue";
let CardList = ref(null);
onMounted(() => {
  getNearOrders().then((res) => {
    CardList.value = res.data.data;
  });
});
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.index-top-card {
  background: linear-gradient(#226dfe, white);
  padding: 15px;
}
.card-count {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
}
.fs-16 {
  font-size: 14px;
  font-weight: 700;
}
.mt-10 {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}
.mt-10 p:nth-child(2) {
  font-size: 10px;
  color: silver;
}
.index-list {
  padding: 15px;
  .van-row {
    .van-col:nth-child(1) {
      font-size: 15px;
    }
    .van-col:nth-child(2) {
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: end;
    }
  }
}
</style>
